<template>
    <a-drawer
        :width="width"
        :title = "title"
        :visible = "visible"
        @close="closeDrawer"
    >
        <router-view />
    </a-drawer>
</template>

<script>
    export default {
        props : {
            //  当前页面的路由名称
            routeName : { type : String },
            //  抽屉宽度,默认500
            width : { type : String, default : () => '500' }
        },
        watch: {
            // 如果路由有变化，会再次执行该方法
            '$route' : function (route,oldRoute) {
                //  从子页面回来时，关闭抽屉
                if (oldRoute.name !== this.routeName){
                    this.visible = false;
                }
                //  打开抽屉
                if (route.name !== this.routeName){
                    this.visible = true;
                    this.title = route.meta.title;
                }
            }
        },
        created(){
            //  打开抽屉
            if (this.$route.name !== this.routeName) {
                this.visible = true;
                this.title = this.$route.meta.title;
            }
        },
        data(){
            return {
                title : '',
                visible : false,
            };
        },
        methods : {
            /**
             * 关闭抽屉
             */
            closeDrawer : function () {
                this.$router.push({ name : this.routeName }).then();
            }
        }
    }
</script>
